<script setup lang="ts">
import { getCurrentInstance, ref, reactive, watch, onBeforeMount, onMounted, onUpdated, nextTick } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'
const { proxy } = getCurrentInstance()

/* ---- */
const userInfo = proxy.$Store.get('userInfo') || {}
const logUser = proxy.$Store.get('logUser') || {}
const WXConfig = proxy.$Store.get('WXConfig') || {}
const forSys = proxy.$Sys || []

/* --设置微信分享功能-- */
proxy.$WxTool.loadJsdk(WXConfig, (obj) => {
  if (!obj) return
  // ----
  obj.hideMenuItem()
})

/* ---- */
const forExtend = proxy.$route.query.exTend ? JSON.parse(proxy.$route.query.exTend) : []
// ----
const user = reactive({
  publicCode: ''
})
// ----
const forSearch = ref(proxy.$Store.get('forSearch') || {})
// ----
const curkey = ref(0)
// ----
const ctypes = [{
  value: '1',
  text: '手机查询'
}, {
  value: '2',
  text: '时间查询'
}]
const ctype = ref(forSearch.value.ctype || ctypes[0].value)
const ctypeText = ref(forSearch.value.ctypeText || ctypes[0].text)
// ----
const dateMin = ref(null)
const dateMax = ref(null)
const infoSch = ref(null)
// ----
const tSpeed = 300
let bar = null
let clientWidth = 0
let navWidth = 0
let navSwiper = null
const areas = ref([])
// ----
const code = reactive({
  holder: '请输入手机验证码',
  info: '获取验证码',
  count: 60,
  isClick: false
})
const isMobile = /^(1[3456789]\d{9})$/
const form = reactive({ smscode: '' })
// --mescroll--
const noData = proxy.$Global.noData
let mescroll = null
const items = ref([])

/* ---- */
const pickerCtype = ref()
const pickerDate = ref()
const layerBox = ref()
const layer = ref()
const layerLoading = ref()

/* ---- */
const setAppTitle = (title) => {
  document.title = title
  // --利用iframe的onload事件刷新页面--
  const iframe = document.createElement('iframe')
  iframe.style.visibility = 'hidden'
  iframe.style.width = 0
  iframe.style.height = 0
  document.body.appendChild(iframe)
  nextTick(() => { document.body.removeChild(iframe) })
}
// ----
const setInitData = () => {
  switch (Number(proxy.$route.query.pageType)) {
    case 1: {
      areas.value = [{
        value: forExtend[0].salary + '元',
        text: '待发提成',
        head: [{
          name: '联合运营商',
          key: 'name',
          style: { width: '34%' }
        }, {
          name: '待发金额（元）',
          key: 'amount',
          style: {}
        }, {
          name: '提现时间',
          key: 'date',
          style: { width: '32%' }
        }],
        type: 'get',
        url: 'salary-log/index',
        data: {
          params: {
            'SalaryLogSearch[check_status]': '审核中',
            'SalaryLogSearch[is_level]': 1,
            // ----
            sort: 'SORT_DESC',
            // ----
            config_id: userInfo.config_id,
            openid: userInfo.openid
          }
        }
      }, {
        value: forExtend[1].salary + '元',
        text: '发放明细',
        head: [{
          name: '领取人',
          key: 'name',
          style: { width: '30%' }
        }, {
          name: '金额（元）',
          key: 'amount',
          style: {}
        }, {
          name: '时间',
          key: 'date',
          style: { width: '30%' }
        }, {
          name: '状态',
          className: 'statusClass',
          iconHtml: 'statusIcon',
          style: { width: '16%', textAlign: 'center' },
          callback: (item) => {
            const options = {
              type: 8,
              button: [{
                text: '通过审核',
                class: 'xw-radius-3 xw-bgCL-11 xw-act',
                callback: async (info) => {
                  if (!info) {
                    proxy.$Myfun.forToast(layer.value, 'open', '请输入收到的验证码！')
                    return false
                  }
                  if (String(info) === String(user.publicCode)) {
                    proxy.$Myfun.forToast(layer.value, 'open', '必须使用手机收到的验证码！')
                    return false
                  }
                  // ----
                  const forType = 'post'
                  const forUrl = 'salary-log/payagain'
                  const forData = {
                    telphone: logUser.telphone,
                    smscode: info,
                    id: item.id,
                    // ----
                    config_id: userInfo.config_id,
                    openid: userInfo.openid
                  }
                  // ----
                  proxy.$Myfun.onLoading(layerLoading.value, 'open', proxy.$Global.loadingMsg)
                  let resData = ''
                  await proxy.$http[forType](forUrl, forData).then((res) => { resData = res }).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
                  // ----
                  proxy.$Myfun.disLoading(layerLoading.value, 'close')
                  if (resData.success) {
                    layerBox.value.close()
                    // --重新请求数据--
                    mescroll.scrollTo(0)
                    mescroll.resetUpScroll()
                  } else { proxy.$Myfun.forToast(layer.value, 'open', resData.message) }
                }
              }]
            }
            proxy.$Myfun.isIndepth(layerBox.value, 'open', options)
            // ----
            proxy.$http.post('wechat/get-mobile-code', {
              telphone: logUser.telphone,
              is_reg_check: 1,
              SmsType: 3,
              // ----
              config_id: userInfo.config_id,
              openid: userInfo.openid
            }).then((res) => {
              if (!res.success) proxy.$Myfun.forToast(layer.value, 'open', res.message)
            }).catch((err) => {
              proxy.$Myfun.forToast(layer.value, 'open', err)
            })
          }
        }],
        type: 'get',
        url: 'salary-log/index',
        data: {
          params: {
            'SalaryLogSearch[check_status]': '审核通过',
            'SalaryLogSearch[is_level]': 1,
            // ----
            sort: 'SORT_DESC',
            // ----
            config_id: userInfo.config_id,
            openid: userInfo.openid
          }
        }
      }]
      break
    }
    case 2: {
      areas.value = [{
        value: forExtend[0].salary + '元',
        text: '待发奖金',
        head: [{
          name: '联合运营商',
          key: 'name',
          style: { width: '34%' }
        }, {
          name: '待发金额（元）',
          key: 'amount',
          style: {}
        }, {
          name: '提现时间',
          key: 'date',
          style: { width: '32%' }
        }],
        type: 'get',
        url: 'salary-log/index',
        data: {
          params: {
            'SalaryLogSearch[check_status]': '审核中',
            'SalaryLogSearch[is_level]': 2,
            // ----
            sort: 'SORT_DESC',
            // ----
            config_id: userInfo.config_id,
            openid: userInfo.openid
          }
        }
      }, {
        value: forExtend[1].salary + '元',
        text: '发放明细',
        head: [{
          name: '领取人',
          key: 'name',
          style: { width: '30%' }
        }, {
          name: '金额（元）',
          key: 'amount',
          style: {}
        }, {
          name: '时间',
          key: 'date',
          style: { width: '30%' }
        }, {
          name: '状态',
          className: 'statusClass',
          iconHtml: 'statusIcon',
          style: { width: '16%', textAlign: 'center' },
          callback: (item) => {
            const options = {
              type: 8,
              button: [{
                text: '通过审核',
                class: 'xw-radius-3 xw-bgCL-11 xw-act',
                callback: async (info) => {
                  if (!info) {
                    proxy.$Myfun.forToast(layer.value, 'open', '请输入收到的验证码！')
                    return false
                  }
                  if (String(info) === String(user.publicCode)) {
                    proxy.$Myfun.forToast(layer.value, 'open', '必须使用手机收到的验证码！')
                    return false
                  }
                  // ----
                  const forType = 'post'
                  const forUrl = 'salary-log/payagain'
                  const forData = {
                    telphone: logUser.telphone,
                    smscode: info,
                    id: item.id,
                    // ----
                    config_id: userInfo.config_id,
                    openid: userInfo.openid
                  }
                  // ----
                  proxy.$Myfun.onLoading(layerLoading.value, 'open', proxy.$Global.loadingMsg)
                  let resData = ''
                  await proxy.$http[forType](forUrl, forData).then((res) => { resData = res }).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
                  // ----
                  proxy.$Myfun.disLoading(layerLoading.value, 'close')
                  if (resData.success) {
                    layerBox.value.close()
                    // --重新请求数据--
                    mescroll.scrollTo(0)
                    mescroll.resetUpScroll()
                  } else { proxy.$Myfun.forToast(layer.value, 'open', resData.message) }
                }
              }]
            }
            proxy.$Myfun.isIndepth(layerBox.value, 'open', options)
            // ----
            proxy.$http.post('wechat/get-mobile-code', {
              telphone: logUser.telphone,
              is_reg_check: 1,
              SmsType: 3,
              // ----
              config_id: userInfo.config_id,
              openid: userInfo.openid
            }).then((res) => {
              if (!res.success) proxy.$Myfun.forToast(layer.value, 'open', res.message)
            }).catch((err) => {
              proxy.$Myfun.forToast(layer.value, 'open', err)
            })
          }
        }],
        type: 'get',
        url: 'salary-log/index',
        data: {
          params: {
            'SalaryLogSearch[check_status]': '审核通过',
            'SalaryLogSearch[is_level]': 2,
            // ----
            sort: 'SORT_DESC',
            // ----
            config_id: userInfo.config_id,
            openid: userInfo.openid
          }
        }
      }]
      break
    }
    case 3: {
      areas.value = [{
        value: forExtend[0].salary + '元',
        text: '待发佣金',
        head: [{
          name: '联合运营商',
          key: 'name',
          style: { width: '34%' }
        }, {
          name: '待发金额（元）',
          key: 'amount',
          style: {}
        }, {
          name: '提现时间',
          key: 'date',
          style: { width: '32%' }
        }],
        type: 'get',
        url: 'salary-log/index',
        data: {
          params: {
            'SalaryLogSearch[check_status]': '审核中',
            'SalaryLogSearch[is_level]': 3,
            // ----
            sort: 'SORT_DESC',
            // ----
            config_id: userInfo.config_id,
            openid: userInfo.openid
          }
        }
      }, {
        value: forExtend[1].salary + '元',
        text: '发放明细',
        head: [{
          name: '领取人',
          key: 'name',
          style: { width: '30%' }
        }, {
          name: '金额（元）',
          key: 'amount',
          style: {}
        }, {
          name: '时间',
          key: 'date',
          style: { width: '30%' }
        }, {
          name: '状态',
          className: 'statusClass',
          iconHtml: 'statusIcon',
          style: { width: '16%', textAlign: 'center' },
          callback: (item) => {
            const options = {
              type: 8,
              button: [{
                text: '通过审核',
                class: 'xw-radius-3 xw-bgCL-11 xw-act',
                callback: async (info) => {
                  if (!info) {
                    proxy.$Myfun.forToast(layer.value, 'open', '请输入收到的验证码！')
                    return false
                  }
                  if (String(info) === String(user.publicCode)) {
                    proxy.$Myfun.forToast(layer.value, 'open', '必须使用手机收到的验证码！')
                    return false
                  }
                  // ----
                  const forType = 'post'
                  const forUrl = 'salary-log/payagain'
                  const forData = {
                    telphone: logUser.telphone,
                    smscode: info,
                    id: item.id,
                    // ----
                    config_id: userInfo.config_id,
                    openid: userInfo.openid
                  }
                  // ----
                  proxy.$Myfun.onLoading(layerLoading.value, 'open', proxy.$Global.loadingMsg)
                  let resData = ''
                  await proxy.$http[forType](forUrl, forData).then((res) => { resData = res }).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
                  // ----
                  proxy.$Myfun.disLoading(layerLoading.value, 'close')
                  if (resData.success) {
                    layerBox.value.close()
                    // --重新请求数据--
                    mescroll.scrollTo(0)
                    mescroll.resetUpScroll()
                  } else { proxy.$Myfun.forToast(layer.value, 'open', resData.message) }
                }
              }]
            }
            proxy.$Myfun.isIndepth(layerBox.value, 'open', options)
            // ----
            proxy.$http.post('wechat/get-mobile-code', {
              telphone: logUser.telphone,
              is_reg_check: 1,
              SmsType: 3,
              // ----
              config_id: userInfo.config_id,
              openid: userInfo.openid
            }).then((res) => {
              if (!res.success) proxy.$Myfun.forToast(layer.value, 'open', res.message)
            }).catch((err) => {
              proxy.$Myfun.forToast(layer.value, 'open', err)
            })
          }
        }],
        type: 'get',
        url: 'salary-log/index',
        data: {
          params: {
            'SalaryLogSearch[check_status]': '审核通过',
            'SalaryLogSearch[is_level]': 3,
            // ----
            sort: 'SORT_DESC',
            // ----
            config_id: userInfo.config_id,
            openid: userInfo.openid
          }
        }
      }]
      break
    }
  }
}
// --initSwiperData || changeSwiperData--
const onSwiper = (swiper) => { navSwiper = swiper }
const initSwiper = (index) => {
  if (Number(areas.value.length) === 0) return false
  // --初始化--
  if (!navSwiper.el.querySelector('.bar')) {
    const newBar = document.createElement('div')
    newBar.setAttribute('class', 'bar')
    newBar.innerHTML = '<span class="xw-anim"></span>'
    navSwiper.wrapperEl.appendChild(newBar)
  }
  bar = navSwiper.el.querySelector('.bar')
  navSwiper.slides[navSwiper.activeIndex].querySelector('span').style.color = '#3388ff'
  // --Nav的可视宽度--
  clientWidth = navSwiper.wrapperEl.offsetWidth
  navWidth = 0
  for (let i = 0; i < navSwiper.slides.length; i++) {
    navWidth += navSwiper.slides[i].offsetWidth
  }
  // --点击slide事件--
  navSwiper.on('tap', () => {
    swiperMescroll(navSwiper.clickedIndex)
    // ----
    const newItems = [navSwiper.clickedIndex]
    proxy.$Myfun.setSearchRes(proxy, newItems, ['curIndex', 'ctype', 'ctypeText', 'infoSch', 'dateMax', 'dateMin'], (result) => { forSearch.value = result })
  })
  // ----
  setTimeout(() => { swiperMescroll(index) }, 100)
}
const swiperMescroll = (index) => {
  const clickIndex = index
  const clickSlide = navSwiper.slides[clickIndex]
  const activeSlidePosition = navSwiper.slides[clickIndex].offsetLeft

  // --释放时导航移动过渡--
  bar.style.transitionDuration = tSpeed + 'ms'
  bar.style.width = clickSlide.offsetWidth + 'px'
  bar.querySelector('span').style.width = clickSlide.querySelector('span').offsetWidth + 'px'
  bar.style.transform = 'translateX(' + activeSlidePosition + 'px)'

  // --导航居中--
  const navSlideWidth = clickSlide.offsetWidth
  // --activeSlide距左边的距离--
  const navActiveSlideLeft = navSwiper.slides[clickIndex].offsetLeft

  navSwiper.setTransition(tSpeed)
  if (navWidth > clientWidth) {
    if (navActiveSlideLeft < (clientWidth - navSlideWidth) / 2) {
      navSwiper.setTranslate(0)
    } else if (navActiveSlideLeft > navWidth - (navSlideWidth + clientWidth) / 2) {
      navSwiper.setTranslate(clientWidth - navWidth)
    } else {
      navSwiper.setTranslate((clientWidth - navSlideWidth) / 2 - navActiveSlideLeft)
    }
  }

  navSwiper.slides.forEach((current) => { current.querySelector('span').style.color = '#111111' })
  clickSlide.style.transitionDuration = tSpeed + 'ms'
  clickSlide.querySelector('span').style.color = '#3388ff'
}
// ----
const getSelectSearch = () => {
  switch (Number(ctype.value)) {
    case 1: {
      infoSch.value = forSearch.value.infoSch
      break
    }
    default: {
      dateMin.value = forSearch.value.dateMin
      dateMax.value = forSearch.value.dateMax
    }
  }
}
const forTime = () => {
  code.isClick = !code.isClick
  const timer = () => {
    if (code.count > 0) {
      const forCount = code.count < 10 ? '0' + code.count : code.count
      code.info = forCount + '秒后重发'
      code.count--
      setTimeout(timer, 1000)
    } else {
      code.info = '获取验证码'
      code.count = 60
      code.isClick = !code.isClick
    }
  }
  timer()
}
// ----
const getCurrencyInfo = async (callback) => {
  getSelectSearch()
  // -- 获取通用验证码 --
  const newItems = forSys.filter((item) => { return String(item.name) === 'omnipotent_code' })
  if (Number(newItems.length) === 1) user.publicCode = newItems[0].value
  // --获取提现余额--
  for (let i = 0; i < Number(forExtend.length); i++) {
    const item = forExtend[i]
    // ----
    const extra = {
      config_id: userInfo.config_id,
      openid: userInfo.openid
    }
    Object.assign(extra, item.data)
    // ----
    await proxy.$http[item.type](item.url, extra).then((res) => {
      if (res.success) item.salary = res.datainfo
    }).catch((err) => { errorCallback && errorCallback(err) })
  }
  // ----
  await setInitData()
  // --设置网页title--
  const forTitle = proxy.$route.query.title ? proxy.$route.query.title : document.title
  setAppTitle(forTitle)
  // ----
  callback && callback()
}
// --getData--
const startMeScroll = () => {
  mescroll = new MeScroll(proxy.$refs.dataScroll, {
    up: {
      callback: getListData,
      isBounce: false,
      page: { num: 0, size: 10 },
      htmlNodata: '<p class="upwarp-nodata">-- 到底啦 --</p>',
      noMoreSize: 10,
      toTop: {
        src: '/pics/mescroll-totop.png',
        offset: 1000
      },
      empty: {
        warpId: proxy.$refs.dataList,
        tip: noData
      }
    }
  })
}
const getListData = (page) => {
  const extra = {
    page: page.num,
    PageSize: page.size
  }
  // ----
  if (Number(curkey.value) === 1) {
    Object.assign(extra, {
      'SalaryLogSearch[telphone]': infoSch.value,
      'SalaryLogSearch[created_at_start]': dateMin.value,
      'SalaryLogSearch[created_at_end]': dateMax.value
    })
  }
  // ----
  switch (String(areas.value[curkey.value].type)) {
    case 'post': {
      Object.assign(areas.value[curkey.value].data, extra)
      break
    }
    case 'get': {
      Object.assign(areas.value[curkey.value].data.params, extra)
      break
    }
  }
  // ----
  getListDataFromNet({
    forType: areas.value[curkey.value].type,
    forUrl: areas.value[curkey.value].url,
    forData: areas.value[curkey.value].data
  }, page.num, page.size, (curPageData) => {
    setListData(curPageData).then((result) => {
      mescroll.endSuccess(curPageData ? curPageData.length : 0, true)
      items.value = items.value.concat(result)
    })
  }, (resMsg) => {
    mescroll.endErr()
    proxy.$Myfun.forToast(layer.value, 'open', resMsg)
  })
}
const getListDataFromNet = (option, pageNum, pageSize, successCallback, errorCallback) => {
  if (Number(pageNum) === 1) {
    if (document.querySelector('.upwarp-nodata')) { document.querySelector('.upwarp-nodata').style.visibility = 'hidden' }
    items.value = []
  }
  // ----
  proxy.$http[option.forType](option.forUrl, option.forData).then((res) => {
    switch (String(option.forType)) {
      case 'post': {
        if (res.success) {
          successCallback && successCallback(res.datainfo)
        } else { errorCallback && errorCallback(res.message) }
        break
      }
      case 'get': {
        successCallback && successCallback(res.items)
        break
      }
    }
  }).catch((err) => { errorCallback && errorCallback(err) })
}
const setListData = async (items) => {
  const newItems = []
  for (let i = 0; i < Number(items.length); i++) {
    const item = items[i]
    // ----
    let forStatusClass = ''
    let forStatusIcon = ''
    switch (String(item.attend_status)) {
      case '支付成功': {
        forStatusClass = 'xw-color-1'
        forStatusIcon = '<em class="fa fa-check LCH-icon"></em>'
        break
      }
      case '支付失败': {
        forStatusClass = 'xw-color-24'
        forStatusIcon = '<span class="xw-btn xw-WRed LCH-btn">再发</span>'
        break
      }
      default: {
        forStatusClass = 'xw-color-2'
        forStatusIcon = '<em class="far fa-clock-three LCH-icon"></em>'
      }
    }
    // ----
    newItems.push({
      id: item.id,
      name: item.telphone,
      amount: item.amount,
      date: proxy.$Myfun.getDateShort(item.created_at),
      statusClass: forStatusClass,
      statusIcon: forStatusIcon,
      styleOne: areas.value[curkey.value].head[0] ? areas.value[curkey.value].head[0].style : '',
      styleThree: areas.value[curkey.value].head[2] ? areas.value[curkey.value].head[2].style : '',
      styleFour: areas.value[curkey.value].head[3] ? areas.value[curkey.value].head[3].style : ''
    })
  }
  return newItems
}
const divScroll = (event) => { proxy.$Myfun.setImgToTop() }
// ----
const emptyInfo = (event) => {
  const curEL = event.currentTarget
  const input = curEL.parentElement.querySelector('input')
  input.value = ''
  input.dispatchEvent(new Event('input'))
}
const checkLimit = (event, reg, info) => {
  const curEL = event.currentTarget
  if (Number(curEL.value.length) === 0) return false
  if (!reg.test(curEL.value)) {
    if (info) proxy.$Myfun.forToast(layer.value, 'open', info)
    // ----
    curEL.value = ''
    curEL.dispatchEvent(new Event('input'))
  }
}
// ----
const getAuditFun = (type, item, event) => {
  switch (Number(type)) {
    case 1: {
      const options = {
        type: 1,
        button: ['取消', '确定'],
        initData: ctypes,
        yes: (result) => {
          const curObj = result[0]
          const newItems = []
          for (const key in curObj) { if (curObj[key]) newItems.push(curObj[key]) }
          // ----
          proxy.$Myfun.setSearchRes(proxy, newItems, ['ctype', 'ctypeText', 'infoSch', 'dateMax', 'dateMin'], (result) => { forSearch.value = result })
        }
      }
      proxy.$Myfun.isIndepth(pickerCtype.value, 'open', options)
      break
    }
    case 2: {
      const newItems = item || []
      const extra = event || []
      proxy.$Myfun.setSearchRes(proxy, newItems, extra, (result) => { forSearch.value = result })
      break
    }
    case 3: {
      const options = {
        opts: { beginYear: 2000, endYear: 2400, date: dateMin.value },
        button: ['取消', '确定'],
        yes: (result) => {
          let resText = ''
          result.forEach((curItem, index) => {
            resText += (index > 0 ? ' - ' : '') + curItem.text
          })
          dateMin.value = resText
        }
      }
      proxy.$Myfun.isIndepth(pickerDate.value, 'open', options)
      break
    }
    case 4: {
      const options = {
        opts: { beginYear: 2000, endYear: 2400, date: dateMax.value },
        button: ['取消', '确定'],
        yes: (result) => {
          let resText = ''
          result.forEach((curItem, index) => {
            resText += (index > 0 ? ' - ' : '') + curItem.text
          })
          dateMax.value = resText
        }
      }
      proxy.$Myfun.isIndepth(pickerDate.value, 'open', options)
      break
    }
    case 5: {
      if (code.isClick) return false
      // ----
      proxy.$Myfun.onLoading(layerLoading.value, 'open', proxy.$Global.loadingMsg)
      proxy.$http.post('wechat/get-mobile-code', {
        telphone: logUser.telphone,
        is_reg_check: 1,
        SmsType: 3,
        // ----
        config_id: userInfo.config_id,
        openid: userInfo.openid
      }).then((res) => {
        proxy.$Myfun.disLoading(layerLoading.value, 'close')
        if (res.success) {
          forTime()
        } else { proxy.$Myfun.forToast(layer.value, 'open', res.message) }
      }).catch((err) => {
        proxy.$Myfun.disLoading(layerLoading.value, 'close')
        proxy.$Myfun.forToast(layer.value, 'open', err)
      })
      break
    }
    case 6: {
      event && event(item)
      break
    }
  }
}
// ----
const subform = async () => {
  if (Number(items.value.length) === 0) {
    proxy.$Myfun.forToast(layer.value, 'open', '暂无佣金发放审核商友！')
    return false
  }
  if (Number(form.smscode.length) === 0) {
    proxy.$Myfun.forToast(layer.value, 'open', '请填写获取的验证码！')
    return false
  }
  if (String(form.smscode) === String(user.publicCode)) {
    proxy.$Myfun.forToast(layer.value, 'open', '必须使用手机收到的验证码！')
    return false
  }
  // ----
  const forType = 'post'
  const forUrl = 'salary-log/check'
  const forData = {
    telphone: logUser.telphone,
    smscode: form.smscode,
    // ----
    config_id: userInfo.config_id,
    openid: userInfo.openid
  }
  // ----
  proxy.$Myfun.onLoading(layerLoading.value, 'open', proxy.$Global.loadingMsg)
  let resData = ''
  await proxy.$http[forType](forUrl, forData).then((res) => { resData = res }).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
  // ----
  proxy.$Myfun.disLoading(layerLoading.value, 'close')
  if (resData.success) {
    proxy.$router.back()
  } else { proxy.$Myfun.forToast(layer.value, 'open', resData.message) }
}
const goback = () => { proxy.$router.back() }

/* ---- */
watch(() => forSearch.value, (newVal, oldVal) => {
  curkey.value = newVal.curIndex || 0
  // ----
  ctype.value = newVal.ctype || ctypes[0].value
  ctypeText.value = newVal.ctypeText || ctypes[0].text
  // ----
  getSelectSearch()
  // --重新请求数据--
  mescroll.scrollTo(0)
  mescroll.resetUpScroll()
}, { deep: true })

/* ---- */
onBeforeMount(() => {
  curkey.value = forSearch.value.curIndex || 0
})
onMounted(() => {
  if (!proxy.$route.query.pageType) return false
  // ----
  getCurrencyInfo(() => {
    nextTick(() => { initSwiper(curkey.value) })
    // --创建MeScroll对象--
    setTimeout(() => { startMeScroll() }, 500)
  })
})
onUpdated(() => { nextTick(() => { proxy.$Myfun.setSectionH() }) })
onBeforeRouteLeave(() => {
  if (mescroll) mescroll.destroy()
  proxy.$Store.remove('forSearch')
})
</script>

<template>
  <div>
    <header class="xw-bg-gray">
      <div class="FNV-menu" v-if="Number(areas.length) > 0">
        <swiper :slides-per-view="2" @swiper="onSwiper">
          <swiper-slide v-for="(item, index) in areas"><span>
            <div class="FNV-menu-title">{{item.text}}</div>
            <div class="FNV-menu-msg">{{item.value}}</div>
          </span></swiper-slide>
        </swiper>
      </div>
      <template v-if="Number(curkey) === 1">
      <div class="forTop xw-flex xw-flex-align">
        <div class="TOP-chage xw-bg-white xw-radius-3 xw-flex-W1 xw-flex xw-flex-align" @click="getAuditFun(1)">
          <p class="xw-flex-W1"><input class="schText" type="text" placeholder="" v-model.trim="ctypeText" readonly unselectable="on" onfocus="this.blur()"/></p>
          <em class="far fa-angle-down TOP-R"></em>
        </div>
        <div class="TOP-sch xw-bg-white xw-radius-3 xw-flex-W2 xw-flex xw-flex-align" v-if="Number(ctype) === 1">
          <em class="far fa-search TOP-L"></em>
          <p class="xw-flex-W1"><input class="schText" type="text" placeholder="输入商友手机号" v-model.trim="infoSch" @blur="checkLimit($event, isMobile, '请输入正确的手机号')"/></p>
          <transition name="fade"><em class="fa fa-times-circle" @click="getAuditFun(2, [], ['infoSch'])" v-if="infoSch"></em></transition>
          <span class="TOP-btn TOP-R xw-Lfg" @click="getAuditFun(2, [infoSch], ['infoSch'])">搜索</span>
        </div>
      </div>
      <div class="forCash xw-flex xw-flex-align" v-if="Number(ctype) === 2">
        <div class="TOP-sch xw-bg-white xw-radius-3 xw-flex-W1 xw-flex xw-flex-align">
          <div class="xw-flex-W1 xw-flex xw-flex-align">
            <p class="xw-flex-W1"><input class="schText xw-act" type="text" placeholder="开始时间" v-model.trim="dateMin" @click="getAuditFun(3)" readonly unselectable="on" onfocus="this.blur()"/></p>
            <transition name="fade"><em class="fa fa-times-circle" @click="getAuditFun(2, ['', dateMax], ['dateMin', 'dateMax'])" v-if="dateMin"></em></transition>
          </div>
          <div class="xw-flex-W1 xw-flex xw-flex-align">
            <p class="xw-flex-W1"><input class="schText xw-act" type="text" placeholder="截止时间" v-model.trim="dateMax" @click="getAuditFun(4)" readonly unselectable="on" onfocus="this.blur()"/></p>
            <transition name="fade"><em class="fa fa-times-circle" @click="getAuditFun(2, ['', dateMin], ['dateMax', 'dateMin'])" v-if="dateMax"></em></transition>
          </div>
          <span class="TOP-btn TOP-R xw-Lfg" @click="getAuditFun(2, [dateMin, dateMax], ['dateMin', 'dateMax'])">搜索</span>
        </div>
      </div>
      </template>
      <div class="list-box" v-if="areas[curkey]">
        <ul>
          <li class="xw-bg-white">
            <div v-for="(item, index) in areas[curkey].head" :style="item.style">{{item.name}}</div>
          </li>
        </ul>
      </div>
    </header>
    <div class="xw-section">
      <div ref="dataScroll" class="mescroll" @scroll="divScroll">
        <div class="list-cash" ref="dataList">
          <ul>
            <li class="xw-bg-white" v-for="(item, index) in items" :class="[areas[curkey].head[3] ? item[areas[curkey].head[3].className] : '']">
              <div :style="item.styleOne" v-if="areas[curkey].head[0]">{{item[areas[curkey].head[0].key]}}</div>
              <div v-if="areas[curkey].head[1]">{{item[areas[curkey].head[1].key]}}</div>
              <div :style="item.styleThree" v-if="areas[curkey].head[2]">{{item[areas[curkey].head[2].key]}}</div>
              <div :style="item.styleFour" v-if="areas[curkey].head[3]">
                <p class="xw-flex xw-flex-center" @click="getAuditFun(6, item, areas[curkey].head[3].callback)" v-html="item[areas[curkey].head[3].iconHtml]"></p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <footer class="xw-bg-gray" v-if="Number(curkey) === 0">
      <div class="formSet">
        <ul>
          <li class="xw-flex xw-flex-align">
            <div class="form-txt xw-radius-3 xw-flex-W1 xw-flex xw-flex-align">
              <p class="xw-flex-W1"><input class="text" type="text" :placeholder="code.holder" v-model.trim="form.smscode"/></p>
              <transition name="fade"><em class="fa fa-times-circle" @click="emptyInfo" v-if="form.smscode"></em></transition>
            </div>
            <span class="xw-radius-3" :class="[code.isClick ? 'form-btn-time' : 'form-btn xw-WBlue']" @click="getAuditFun(5)">{{code.info}}</span>
          </li>
        </ul>
        <div class="form-sub xw-radius-3 xw-bgCL-11 xw-act" @click="subform">通过审核</div>
        <div class="form-sub xw-radius-3 xw-WhiteRed xw-act" @click="goback">取消返回</div>
      </div>
    </footer>
    <picker-view ref="pickerCtype"/>
    <pickerdate-view ref="pickerDate"/>
    <layer-view ref="layerBox"/>
    <layer-view ref="layer"/>
    <layer-view ref="layerLoading"/>
  </div>
</template>

<style scoped>
/* ---- */
.FNV-menu { margin: 0.5rem 0 0; height: 4.6rem; }
.FNV-menu .swiper { height: 100%; }

/* ---- */
.TOP-chage { padding: 0 1rem; height: 3.4rem; border: 1px solid #d7d7d7; }
.TOP-chage em { padding: 0 1rem; font-size: 1.7rem; color: #bbbbbb; }

/* ---- */
.forCash { padding: 0 1rem 0.8rem 0; }
.TOP-sch { margin: 0 0 0 1rem; }

/* ---- */
.list-box { margin: 0 1rem; }
.list-box ul { display: table; width: 100%; table-layout: fixed; border-collapse: collapse; }
.list-box ul li { display: table-row; border-style: solid; border-color: #d7d7d7; border-width: 1px 1px 0 0; }
.list-box ul li div { display: table-cell; padding: 0.5rem; line-height: 2.5rem; font-weight: bold; vertical-align: middle; word-wrap: break-word; word-break: break-all; border-style: solid; border-color: #d7d7d7; border-width: 0 0 1px 1px; }

/* ---- */
.list-cash { margin: -1px 1rem 0; }
.list-cash ul { display: table; width: 100%; table-layout: fixed; border-collapse: collapse; }
.list-cash ul li { display: table-row; border-style: solid; border-color: #d7d7d7; border-width: 1px 1px 0 0; }
.list-cash ul li div { display: table-cell; padding: 0.5rem; line-height: 2.5rem; font-size: 1.3rem; vertical-align: middle; word-wrap: break-word; word-break: break-all; border-style: solid; border-color: #d7d7d7; border-width: 0 0 1px 1px; }
</style>
<style>
/* ---- */
.LCH-btn { padding: 0 1rem; font-size: 1.2rem; -webkit-border-radius: 1.3rem; -moz-border-radius: 1.3rem; border-radius: 1.3rem; }
.LCH-icon { font-size: 1.6rem; }
</style>
